<!DOCTYPE html>
<meta charset=utf-8>
<title>Selector: pseudo-classes (:in-range, :out-of-range)</title>
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org" id=link1>
<link rel=help href="https://html.spec.whatwg.org/multipage/#pseudo-classes" id=link2>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="utils.js"></script>
<div id="log"></div>
<input type=number value=0 min=0 max=10 id=number1>
<input type=number value=0 min=0 max=10 id=number2 disabled>
<input type=number value=0 min=1 max=10 id=number3>
<input type=number value=11 min=0 max=10 id=number4>

<script>
  testSelector(":in-range", ["number1"], "':in-range' matches all elements that are candidates for constraint validation, have range limitations, and that are neither suffering from an underflow nor suffering from an overflow");

  testSelector(":out-of-range", ["number3", "number4"], "':out-of-range' matches all elements that are candidates for constraint validation, have range limitations, and that are either suffering from an underflow or suffering from an overflow");

  document.getElementById("number1").value = -10;
  testSelector(":in-range", [], "':in-range' update number1's value < min");
  testSelector(":out-of-range", ["number1", "number3", "number4"], "':out-of-range' update number1's value < min");

  document.getElementById("number3").min = 0;
  testSelector(":in-range", ["number3"], "':in-range' update number3's min < value");
  testSelector(":out-of-range", ["number1", "number4"], "':out-of-range' update number3's min < value");
</script>
